<template>
<!-- 财务信息 -->
<div class="panel">
    <div class="panel-header">
        <div class="bl"></div>
        <div class="title">收款信息</div>
        <div class="more">
            <el-button type="primary" @click="showCreateView">新增</el-button>
        </div>
    </div>
    <div class="panel-body">
        <el-table :data="incomeList" border>
            <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
            <el-table-column label="收款人" prop="user.realname"></el-table-column>
            <el-table-column label="收款编号" prop="receipt_no"></el-table-column>
            <el-table-column label="收款类型" prop="type.title"></el-table-column>
            <el-table-column label="收款方式" prop="way.title"></el-table-column>
            <el-table-column label="收款金额" prop="total"></el-table-column>
            <el-table-column label="创建时间" prop="create_time" width="180"></el-table-column>
            <el-table-column label="收款凭证" prop="receipt">
                <template slot-scope="scope">
                    <upload-file-list :file-list="scope.row.receipt"></upload-file-list>
                </template>
            </el-table-column>
            <el-table-column label="收款单据" prop="note">
                <template slot-scope="scope">
                    <upload-file-list :file-list="scope.row.note"></upload-file-list>
                </template>
            </el-table-column>

            <el-table-column label="操作" width="80px" v-if="$hasRule('order-income-update')">
                <template slot-scope="scope">
                    <el-button type="primary" @click="showEditView(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

        <income-create ref="createRef" @doRefresh="getList"></income-create>
        <income-edit ref="editRef" @doRefresh="getList"></income-edit>
    </div>
</div>
</template>

<script>
import uploadFileList from '@/components/files/index';
import incomeCreate from './income-create.vue'
import incomeEdit from './income-edit.vue'

import {
    getListApi
} from "@/api/order/income";

export default {
    components: {
        uploadFileList,
        incomeCreate,
        incomeEdit
    },
    props: {
        order: {
            type: Object,
            default: {}
        },
    },
    data() {
        return {
            incomeList: []
        };
    },
    methods: {
        getList() {
            // 获取收款信息
            getListApi({
                order_id: this.order.id
            }).then((res) => {
                this.incomeList = res.data.list;
            });
        },
        showCreateView() {
            this.$refs.createRef.showDrawer(this.order.id);
        },
        showEditView(row) {
            this.$refs.editRef.showDrawer(row);
        }
    },
};
</script>

<style lang="less" scoped>
.finance {
    display: flex;
    background-color: #fff;
    margin: 20px 0 12px;

    .finance-item {
        flex: 1;
        padding: 30px 20px;
        text-align: center;
        font-size: 13px;

        .rectangle {
            display: flex;
            justify-content: center;

            .icon {
                width: 32px;
            }

            .money {
                display: flex;
                padding-left: 8px;
                font-size: 14px;
                text-align: left;
                color: #666;
                flex-direction: column;
                justify-content: space-between;
            }
        }

        .intro {
            margin-top: 22px;
            color: #007aff;
            background-color: #eee;
            padding: 5px 0;
            border-radius: 3px;
        }
    }

    .finance-item:first-child {
        border-right: 3px solid #f8f8f8;
    }
}
</style>
